﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Sisocana.Models.LoadMasterPageAndCssModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Load a new master page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
    <link href="<%: Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var css_number = 1;
        var cssFormHolder;

        $(document).ready(function () {
            $("button, input:submit , input:file").button();
            cssFormHolder = $("#moreCSS");
        });

        function addCSSInput() {
            var cssId = "Stylesheets_" + css_number + "__";
            var cssName = "Stylesheets[" + css_number + "].";

            var d = document.createElement("div");
            d.id = "anotherCSS" + css_number;

            var newCssForm = $("<div class='editor-label'><label for='" + cssId + "Name'>CSS Name</label></div><div class='editor-field'><input id='" + cssId + "Name' type='text' value='' name='" + cssName + "Name'></div>" +
            "<div class='editor-label'><label for='" + cssId + "Description'>CSS Description</label></div><div class='editor-field'><input id='" + cssId + "Description' type='text' value='' name='" + cssName + "Description'></div>" +
            "<div class='editor-label'><label for='" + cssId + "File'>Select a file</label></div><div class='editor-field'>" +
            "<input type='file' name='" + cssName + "File' id='" + cssId + "File' onchange=\"document.getElementById('moreCSSLink').style.display = 'block';\" /></div>").hide().css("opacity", 0);
            document.getElementById('moreCSSLink').style.display = 'none';
            newCssForm.children("input:file").button();
            newCssForm.appendTo(cssFormHolder).slideDown(500).animate({ opacity: 1 }, 200);
            css_number++;
        }
    </script>

    <%= Html.ValidationSummary("Please check every field is correctly filled") %>

    <% Html.BeginForm("LoadMasterPageAndCss", "Site", FormMethod.Post, new { enctype = "multipart/form-data" }); %>

        <%= Html.HiddenFor(model => model.SiteId) %>

        <%= Html.EditorFor(model => model.MasterPage) %>
                
        <fieldset>
            <legend>Load stylesheets for the master page</legend>
                <%= Html.EditorFor(model => model.Stylesheets) %>
                <div id="moreCSS">
                </div>
                <div id="moreCSSLink" style="display: none;">
                    <a href="javascript:addCSSInput();">Attach another CSS</a>
                </div>
        </fieldset>

        <fieldset>
            <legend>Load images and scripts</legend>
            <div class="editor-label">
                <%: Html.Label("Select a zip file with the images") %>
            </div>
            <input type="file" name="Images" id="Images" />
            <div class="editor-label">
                <%: Html.Label("Select a zip file with the scripts") %>
            </div>
            <input type="file" name="Scripts" id="Scripts" />
        </fieldset>
        <input type="submit" value="Save" />

    <% Html.EndForm(); %>
    <br />
    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
</asp:Content>
